<template>
	<view>
		<!-- 实现搜索框的吸顶效果 -->
		<view class="search-box">
			<uni-search-bar @input="input" cancelButton="none" radius="100"></uni-search-bar>
		</view>
		<!-- 搜索建议列表 -->
		<view class="suggest-list" v-if="searchResults.length !== 0">
			<view class="sugg-item" v-for="(item,index) in searchResults" :key="item.goods_id">
				<view class="goods_name" v-html="hightlight(item.goods_name)" @click="gotodetail(item.goods_id)">
					<!-- {{item.goods_name}} -->
				</view>
				<!-- 右侧箭头部分 -->
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
		</view>
		<!-- 搜索历史记录 -->
		<view class="history" v-else>
			<!-- 标题区域 -->
			<view class="history-title">
				<text>搜索历史</text>
				<!-- 垃圾桶的删除记录 -->
				<uni-icons type="trash" size="16" @click="cleanHistory"></uni-icons>
			</view>
			<!-- 列表区域 -->
			<view class="history-list">
				<uni-tag :text="item" v-for="(item,index) in histories" @click="gotoGoodsList(item)"></uni-tag>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				// 防抖变量
				timer: null,
				// 搜索的关键字
				kw: '',
				// 存放搜索建议列表的数据
				searchResults: [],
				// 存放历史搜索记录
				historyList: ['q']
			};
		},
		computed:{
			// 不能直接修改原数组，但是我又想用反转之后的数组
			histories(){
				return [...this.historyList].reverse()
			}
			
		},
		// 小程序的生命周期函数，从本次存储当中拿到历史记录
		onLoad(){
			this.historyList =  JSON.parse(uni.getStorageSync('kw') || '[]')
		},
		methods: {
			input(e) {
				// 需要实现搜索框的防抖处理,每当用户触发一次事件，我将timer清空，，那么定时器内部的函数就不会走，一旦我超出时间再去触发，就生效
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.kw = e.value.trim();
					// 为了优化性能，这里延时发送请求
					console.log(this.kw)
					// if (this.kw === '') return uni.$showMsg('搜索内容不能为空');
					this.getSuggestion()
				}, 500)
			},
			// 获取搜索建议列表的数据，发送请求
			async getSuggestion() {
				// 当关键字字为空的时候，搜索结果页面的数组置为空
				if(this.kw === '') {
					this.searchResults = [];
					return false;
				}
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/goods/qsearch?query=' + this.kw);
				// if( res.message.length === 0 ) return uni.$showMsg('没有更多内容')
				if(res.meta.status !==200) return uni.$showMsg()
				this.searchResults = res.message;
				// 每次按下enter键的时候，将搜索的关键字存储到本地浏览器，这里在单独封装成一个函数
				this.saveHistoryList();
			},
			// 存放历史关键字记录
			saveHistoryList(){
				// 要注意相同关键字去重的问题，利用set数据结构去重数组
				this.historyList.push(this.kw);
				const kwlist = new Set(this.historyList)
				// 我要实现的第二步骤，当我每次输入重复的关键字的时候，最新的关键字永远都是第一个tag标签显示，所有要删除原来的属性，再添加新的属性
				kwlist.delete(this.kw);
				// 然后向数组中添加新值
				kwlist.add(this.kw);
				this.historyList = [...kwlist];
				// 我想达到的目的是，最新搜索的那个关键字展示在历史记录的前面，除了使用unshift方法，这使用数组的reserve方法进行反转，配合vue的计算属性来使用
				console.log(this.historyList)
				// 历史记录的持久化问题，使用uni-app的方法
				uni.setStorageSync('kw', JSON.stringify(this.historyList));
			},		
			hightlight(val) {
				// 定义正则表达式，匹配关键字
				const pattern = new RegExp(this.kw, 'ig');
				return val.replace(pattern, `<span style="color:red;">${this.kw}</span>`);
			},
			// 点击每一搜索建议，然后去往到商品详情页
			gotodetail(detail){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+detail
				})
			},
			// 清空搜索历史记录
			cleanHistory(){
				this.historyList=[];
				// 清空之后再次存储到本地
				// uni.setStorageSync('kw', JSON.stringify(this.historyList));
				// 或者直接存空数组进去
				uni.setStorageSync('kw','[]');
			},
			// 点击历史搜素记录，跳转到商品列表页
			gotoGoodsList(item){
				uni.navigateTo({
					url:'../goodes_list/goodes_list?query='+item
				})
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.suggest-list {
		
		padding: 0 8px;

		.sugg-item {
			font-size: 12px;
			display: flex;
			padding: 13px 0;
			border-bottom: 1px solid #efefef;
			align-items: center;
			justify-content: space-between;

			.goods_name {
				// 设置单行文本超出省略点显示
				white-space: nowrap;
				// 溢出文本隐藏
				overflow: hidden;
				// 超出部分省略点显示
				text-overflow: ellipsis;
			}
		}
	}
	.history {
		padding: 0 15px;
	}
	.history-title {
		display: flex;
		justify-content: space-between;
		line-height: 40px;
		border-bottom: 1px solid #efefef;
	}
	.history-list {
		display: flex;
		flex: wrap;
		width: 100px;
		.uni-tag {
			margin-right:5px;
			width: 20px;
			margin-top:5px
		}
	}
</style>
